<template>
  <div class="moduleedit">
    <div v-if="footerlist && footerlist.length > 0">
      <div v-for="(item, i) in footerlist" :key="i">
        <el-form ref="form" :model="item" label-width="110px" size="small">
          <el-divider></el-divider>
          <el-form-item label="导航图标">
            <div class="index_img_nav img_nav" style="margin-right:auto">
              <van-icon :name="item.piclink" size=" 90px"></van-icon>
              <span class="imgnav-reselect" @click="sel_index = i">
                <my-upload url="/api/common/upload/index/" :onload="befau" :on-success="uploadSuccessright" />
              </span>
            </div>
            <div style=" margin-bottom: auto;">
              <el-button type="danger" @click="delbanneritem(i, item.id)">删除</el-button>
            </div>
          </el-form-item>
          <el-form-item label="图标选择">
            <el-col :span="24">
              <el-select :value="item.piclink" @change="setbanneritem($event, i, 'piclink')" placeholder="请选择">
                <el-option v-for="item in icon" :key="item.value" :label="item.label" :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    <van-icon :name="item.value"></van-icon>
                  </span>
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="标题名称">
            <el-col :span="24">
              <el-input :value="item.title" @input="setbanneritem($event, i, 'title')"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="排序">
            <el-col :span="24">
              <el-input :value="item.sort" @input="setbanneritem($event, i, 'sort')"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="链接到">
            <el-col :span="16">
              <el-input :value="item.links" @input="setbanneritem($event, i, 'links')" class="mar-input"></el-input>
              <el-input :value="item.desc" @input="setbanneritem($event, i, 'desc')"></el-input>
            </el-col>
            <el-col :span="6" class="mar_lf_15">
              <LinkMenu @sendRow="getSendRow" :index="i"></LinkMenu>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="btnAdd" @click="addpart">
      <i class="el-icon-plus"></i>
    </div>
  </div>
</template>

<script>
const KEY = "footer";
import { mapState } from "vuex";
import uploadpic from "@/components/page/pic/up_pic";
import myUpload from "@/components/currency/MyUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";
export default {
  data () {
    return {
      sel_index: "",
      activeNames: ["1"],

      icon: [
        { label: "like-o", value: "like-o" },
        { label: "star-o", value: "star-o" },
        { label: "phone-o", value: "phone-o" },
        { label: "setting-o", value: "setting-o" },
        { label: "fire-o", value: "fire-o" },
        { label: "coupon-o", value: "coupon-o" },
        { label: "cart-o", value: "cart-o" },
        { label: "shopping-cart-o", value: "shopping-cart-o" },
        { label: "cart-circle-o", value: "cart-circle-o" },
        { label: "friends-o", value: "friends-o" },
        { label: "comment-o", value: "comment-o" },
        { label: "gem-o", value: "gem-o" },
        { label: "gift-o", value: "gift-o" },
        { label: "point-gift-o", value: "point-gift-o" },
        { label: "send-gift-o", value: "send-gift-o" },
        { label: "service-o", value: "service-o" },
        { label: "bag-o", value: "bag-o" },
        { label: "todo-list-o", value: "todo-list-o" },
        { label: "balance-list-o", value: "balance-list-o" },
        { label: "medel-o", value: "medel-o" },
        { label: "close", value: "close" },
        { label: "clock-o", value: "clock-o" },
        { label: "question-o", value: "question-o" },
        { label: "passed", value: "passed" },
        { label: "add-o", value: "add-o" },
        { label: "gold-coin-o", value: "gold-coin-o" },
        { label: "info-o", value: "info-o" },
        { label: "manager-o", value: "manager-o" },
        { label: "label-o", value: "label-o" },
        { label: "hot-o", value: "hot-o" },
        { label: "hot-sale-o", value: "hot-sale-o" },
        { label: "new-o", value: "new-o" },
        { label: "new-arrival-o", value: "new-arrival-o" },
        { label: "goods-collect-o", value: "goods-collect-o" },
        { label: "eye-o", value: "eye-o" },
        { label: "browsing-history-o", value: "browsing-history-o" },
        { label: "bookmark-o", value: "bookmark-o" },
        { label: "bill-o", value: "bill-o" },
        { label: "video-o", value: "video-o" },
        { label: "shop-o", value: "shop-o" },
        { label: "shop-collect-o", value: "shop-collect-o" },
        { label: "chat-o", value: "chat-o" },
        { label: "smile-comment-o", value: "smile-comment-o" },
        { label: "vip-card-o", value: "vip-card-o" },
        { label: "award-o", value: "award-o" },
        { label: "diamond-o", value: "diamond-o" },
        { label: "volume-o", value: "volume-o" },
        { label: "cluster-o", value: "cluster-o" },
        { label: "underway-o", value: "underway-o" },
        { label: "photo-o", value: "photo-o" },
        { label: "gift-card-o", value: "gift-card-o" },
        { label: "more-o", value: "more-o" },
        { label: "expand-o", value: "expand-o" },
        { label: "play-circle-o", value: "play-circle-o" },
        { label: "pause-circle-o", value: "pause-circle-o" },
        { label: "stop-circle-o", value: "stop-circle-o" },
        { label: "warning-o", value: "warning-o" },
        { label: "phone-circle-o", value: "phone-circle-o" },
        { label: "smile-o", value: "smile-o" },
        { label: "music-o", value: "music-o" },
        { label: "balance-o", value: "balance-o" },
        { label: "refund-o", value: "refund-o" },
        { label: "birthday-cake-o", value: "birthday-cake-o" },
        { label: "user-o", value: "user-o" },
        { label: "thumb-circle-o", value: "thumb-circle-o" },
        { label: "orders-o", value: "orders-o" },
        { label: "tv-o", value: "tv-o" },
        { label: "envelop-o", value: "envelop-o" },
        { label: "flag-o", value: "flag-o" },
        { label: "flower-o", value: "flower-o" },
        { label: "filter-o", value: "filter-o" },
        { label: "bar-chart-o", value: "bar-chart-o" },
        { label: "chart-trending-o", value: "chart-trending-o" },
        { label: "comment-circle-o", value: "comment-circle-o" },
        { label: "brush-o", value: "brush-o" },
        { label: "bullhorn-o", value: "bullhorn-o" },
        { label: "hotel-o", value: "hotel-o" },
        { label: "cashier-o", value: "cashier-o" },
        { label: "newspaper-o", value: "newspaper-o" },
        { label: "warn-o", value: "warn-o" },
        { label: "notes-o", value: "notes-o" },
        { label: "calender-o", value: "calender-o" },
        { label: "bulb-o", value: "bulb-o" },
        { label: "user-circle-o", value: "user-circle-o" },
        { label: "desktop-o", value: "desktop-o" },
        { label: "apps-o", value: "apps-o" },
        { label: "home-o", value: "home-o" },
        { label: "share", value: "share" },
        { label: "search", value: "search" },
        { label: "points", value: "points" },
        { label: "edit", value: "edit" },
        { label: "delete", value: "delete" },
        { label: "qr", value: "qr" },
        { label: "qr-invalid", value: "qr-invalid" },
        { label: "closed-eye", value: "closed-eye" },
        { label: "wap-home", value: "wap-home" },
        { label: "scan", value: "scan" },
        { label: "free-postage", value: "free-postage" },
        { label: "certificate", value: "certificate" },
        { label: "logistics", value: "logistics" },
        { label: "contact", value: "contact" },
        { label: "cash-back-record", value: "cash-back-record" },
        { label: "after-sale", value: "after-sale" },
        { label: "exchange", value: "exchange" },
        { label: "upgrade", value: "upgrade" },
        { label: "ellipsis", value: "ellipsis" },
        { label: "circle", value: "circle" },
        { label: "description", value: "description" },
        { label: "records", value: "records" },
        { label: "sign", value: "sign" },
        { label: "completed", value: "completed" },
        { label: "failure", value: "failure" },
        { label: "ecard-pay", value: "ecard-pay" },
        { label: "peer-pay", value: "peer-pay" },
        { label: "balance-pay", value: "balance-pay" },
        { label: "credit-pay", value: "credit-pay" },
        { label: "debit-pay", value: "debit-pay" },
        { label: "cash-on-deliver", value: "cash-on-deliver" },
        { label: "other-pay", value: "other-pay" },
        { label: "tosend", value: "tosend" },
        { label: "pending-payment", value: "pending-payment" },
        { label: "paid", value: "paid" },
        { label: "aim", value: "aim" },
        { label: "discount", value: "discount" },
        { label: "idcard", value: "idcard" },
        { label: "replay", value: "replay" },
        { label: "shrink", value: "shrink" }
      ]
    };
  },
  computed: {
    ...mapState({
      pageObj: state => state.modulePage.moduledata,
      footerlist: state => state.modulePage.moduledata.footer
    })
  },
  components: {
    uploadpic,
    myUpload,
    LinkMenu
  },
  created () { },
  mounted () { },
  methods: {
    delbanneritem (i, id) {
      this.$store.commit("del_footer", { index: i, id: id || 0 });
    },
    setbanneritem (val, i, name) {
      this.$store.commit("edit_footer", {
        index: i,
        val: val,
        name: name
      });
    },
    addpart () {
      this.$store.commit("add_footer", "");
    },
    befau () { },

    uploadSuccessright (response) {
      console.log(response);
      if (response.code == 200 && response.code_desc == "请求成功") {
        this.$store.commit("edit_footer", {
          index: this.sel_index,
          val: response.result,
          name: "piclink"
        });
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },

    getSendRow (row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      if (result.title == "自定义链接") {
        // this.setIcon(result.desc, result.index, "desc");
        // this.setIcon(result.links, result.index, "links");
        this.setbanneritem(result.desc, result.index, "desc");
        this.setbanneritem(result.links, result.index, "links");
      } else {
        // this.setIcon(result.desc, result.index, "desc");
        // this.setIcon(result.links, result.index, "links");
        this.setbanneritem(result.desc, result.index, "desc");
        this.setbanneritem(result.links, result.index, "links");
      }
    }
  }
};
</script>

<style scoped lang="less">
.mar_10 {
  margin-top: 10px;
}
</style>
